<template>
	<view class="wrap" v-show="popup_show">
		<u-popup v-model="popup_show" :mask-close-able="!force" mode="center" borderRadius="10" :mask="false">
			<view class="update-wrap">
				<view class="update-content">
					<view class="update-con-top">
						<text class="update-top-title">发现新版本</text>
						<text class="update-top-version">: V{{update_info.version}}</text>
					</view>
					<text class="uodate-content" v-if="downstatus < 1">更新内容 : {{update_info.note}}</text>
					<text class="current-version" v-if="downstatus < 1">当前版本 : V{{version}}</text>

					<view class="update-btn" v-if="downstatus < 1">
						<view class="btn-item" @tap="closeUpdate">
							<!-- 残忍拒绝 -->
							<text class="item-text ">取消</text>
						</view>
						<view class="btn-item" @tap="nowUpdate">
							<!-- 立即升级 -->
							<text class="item-text text-bule">立即升级</text>
						</view>
					</view>
					<!-- 下载进度 -->
					<view class="sche-wrap" v-else>
						<!-- 更新包下载中 -->
						<text class="sche-wrap-text">发现新版本...</text>
						<view class="sche-bg">
							<view class="sche-bg-jindu" :style="lengthWidth">
								<view class="sche-bg-round">
									<text class="sche-bg-round-text" v-if="schedule">{{schedule}}%</text>
									<text class="sche-bg-round-text"
										v-else>{{(downloadedSize/1024/1024 ).toFixed(2)}}M</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="updata-bg-img"></view>
				<view class="updata-bg-color"></view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	let vm;
	export default {
		name: "unicorn_app_update",
		//@是否强制更新
		props: {
			force: {
				type: Boolean,
				default: false, //true强制更新  false非强制更新
			},
			application: {
				type: String,
				default: "app"
			}
		},
		data() {
			return {
				popup_show: false, //弹窗是否显示
				platform: "", //ios or android
				version: "1.0.0", //当前软件版本
				need_update: false, // 是否更新
				downing: false, //是否下载中
				downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
				update_info: {
					os: '', //设备系统
					version: '', //最新版本
					note: '', //升级说明
				},
				schedule: 0, //下载进度宽度
				downloadedSize: 0, //下载大小
				viewObj: null, //原生遮罩view
			};
		},
		created() {
			vm = this;
		},
		computed: {
			// 下载进度计算
			lengthWidth: function() {
				return {
					width: vm.schedule * 480 / 100 + "rpx"
				}
			}
		},
		methods: {
			// 检查更新
			update() {
				// 获取手机系统信息
				uni.getSystemInfo({
					success: function(res) {
						vm.platform = res.platform //ios  or android
						// 获取版本号
						plus.runtime.getProperty(plus.runtime.appid, function(inf) {
							vm.version = inf.version
							vm.getUpdateInfo(); //获取更新信息
						});
					}
				});
			},

			// 获取线上版本信息
			getUpdateInfo: function() {
				//向后台发起请求，获取最新版本号
				let paramData = {
					application: 'filmTV',
					appType: vm.platform
				};
				this.$api.post('/appUpgrade/new/version', paramData).then(res => {
					console.log(res)
					vm.update_info = res;
					vm.checkUpdate(); ///检查是否更新
				})
				
			},
			// 检查是否更新
			checkUpdate: function() {
				vm.need_update = vm.compareVersion(vm.version, vm.update_info.version); // 检查是否需要升级
				if (vm.need_update) {
					/* uni.showToast({
						icon: 'none',
						title: "开始下载更新",
						duration: 2000
					}) */
					//plus.runtime.openURL(vm.update_info.downloadUrl);
					vm.popup_show = true; //线上版本号大于当前安装的版本号  显示升级框
					//vm.nowUpdate();	
					// 创建原生view用来遮罩tabbar的点击事件 (如果是没有用原生的tabbar这一步可以取消)
					// vm.viewObj = new plus.nativeObj.View('viewObj', {
					// 	bottom: '0px',
					// 	left: '0px',
					// 	height: '50px',
					// 	width: '100%',
					// 	backgroundColor: "rgba(0,0,0,.6)"
					// });
					// vm.viewObj.show(); //显示原生遮罩
				} else {
					uni.showToast({
						icon: 'none',
						title: "不需要更新",
						duration: 2000
					})
				}
			},

			// 取消更新
			closeUpdate() {
				if (vm.force) {
					// 强制更新，取消退出app
					plus.os.name == "Android" ? plus.runtime.quit() : plus.ios.import("UIApplication").sharedApplication()
						.performSelector(
							"exit");
				} else {
					vm.popup_show = false; //关闭升级弹窗
					//vm.viewObj.hide() //隐藏原生遮罩
				}
			},
			// 立即更新
			nowUpdate() {
				if (vm.downing) {
					return false //如果正在下载就停止操作
				} else {
					vm.downing = true; //状态改变 正在下载中
				}
				vm.download_wgt()
				/* if (/\.apk$/.test(vm.update_info.downloadUrl)) {
					// 如果是apk地址
					vm.download_wgt() // 安装包/升级包更新
				} else if (/\.wgt$/.test(vm.update_info.downloadUrl)) {
					// 如果是更新包
					vm.download_wgt() // 安装包/升级包更新
				} else {
					plus.runtime.openURL(vm.update_info.downloadUrl, function() { //调用外部浏览器打开更新地址
						plus.nativeUI.toast("打开错误");
					});
				} */
			},
			// 下载升级资源包
			download_wgt() {
				plus.nativeUI.showWaiting('更新包下载中'); //下载更新文件...
				let options = {
					method: "get"
				};
				let dtask = plus.downloader.createDownload(vm.update_info.downloadUrl, options, function(d, status) {

				});

				dtask.addEventListener("statechanged", function(task, status) {
					if (status === null) {} else if (status == 200) {
						//在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西///////////////////////////////////////////////////
						vm.downstatus = task.state;
						switch (task.state) {
							case 3: // 已接收到数据  
								vm.downloadedSize = task.downloadedSize;
								let totalSize = 0;
								if (task.totalSize) {
									totalSize = task.totalSize //服务器须返回正确的content-length才会有长度
								}
								vm.schedule = parseInt(100 * task.downloadedSize / totalSize);
								break;
							case 4:
								vm.installWgt(task.filename); // 安装wgt包  
								break;
						}
					} else {
						plus.nativeUI.closeWaiting();
						plus.nativeUI.toast("下载出错");
						vm.downing = false;
						vm.downstatus = 0;
					}
				});
				dtask.start();
			},
			// 安装文件
			installWgt(path) {
				plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
				plus.runtime.install(path, {}, function() {
					plus.nativeUI.closeWaiting();
					// 应用资源下载完成！
					plus.nativeUI.alert("更新包下载中)", function() {
						plus.runtime.restart();
					});
				}, function(e) {
					plus.nativeUI.closeWaiting();
					// 安装更新文件失败
					plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
				});
			},
			// 对比版本号
			compareVersion(ov, nv) {
				if (!ov || !nv || ov == "" || nv == "") {
					return false;
				}
				let b = false,
					ova = ov.split(".", 4),
					nva = nv.split(".", 4);
				for (let i = 0; i < ova.length && i < nva.length; i++) {
					let so = ova[i],
						no = parseInt(so),
						sn = nva[i],
						nn = parseInt(sn);
					if (nn > no || sn.length > so.length) {
						return true;
					} else if (nn < no) {
						return false;
					}
				}
				if (nva.length > ova.length && 0 == nv.indexOf(ov)) {
					return true;
				} else {
					return false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		/deep/.u-mode-center-box {
			background: none;
		}
	}

	.update-wrap {
		width: 580rpx;
		height: 500rpx;
		border-radius: 10rpx;
		padding-bottom: 0px;
		position: relative;
		display: flex;
		flex-direction: column;

		.updata-bg-img {
			position: absolute;
      background: url("images/update-img.png") no-repeat;
      background-size: 100% 100%;
			top: 0vw;
			left: 0px;
			width: 580rpx;
			height: 440rpx;
			z-index: 1;
		}

		.updata-bg-color {
			position: absolute;
			width: 580rpx;
			top: 10vw;
			height: calc(100% - 10vw);
			background-color: #ffffff;
			z-index: 0;

		}

		.update-content {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.update-content {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
		}

		.update-con-top {
			position: relative;
			padding: 70rpx 50rpx;
			margin-top: auto;
		}


		.update-btn {
			width: 100%;
			height: 80rpx;
			padding: 0px 50rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #e7e7e7;
			background-color: #fff;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;

			.btn-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;

				.item-text {
					text-align: center;
					font-size: 28rpx;
					color: #666;
				}

				.text-bule {
					color: $uni-color-primary;
				}
			}

			
			.btn-item:first-child {
				border-right: 1px solid #e7e7e7
			}
		}

		.update-top-title {
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
		}

		.update-top-version {
			color: #fff;
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.uodate-content {
			color: #333;
			font-size: 30rpx;
			padding: 0px 50rpx;
			margin-top: 100rpx;
		}

		.current-version {
			text-align: center;
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #666;
			margin-bottom: 16rpx;
		}
	}

	.sche-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding: 0px 50rpx 40rpx;
		height: 100rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		flex: 1;

		.sche-wrap-text {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.sche-bg {
			position: relative;
			background-color: #ccc;
			height: 20rpx;
			border-radius: 100px;
			width: 480rpx;
			margin-bottom: 30rpx;
		}

		.sche-bg-jindu {
			position: absolute;
			left: 0px;
			top: 0px;
			height: 20rpx;
			background-color: $uni-color-primary;
			border-radius: 100px;

			.sche-bg-round {
				position: absolute;
				left: 100%;
				height: 24rpx;
				width: 24rpx;
				background-color: #fff;
				border-color: #fff;
				border-style: solid;
				border-width: 10px;
				border-radius: 100px;
				transform: translateX(-20rpx) translateY(-10rpx);

				.sche-bg-round-text {
					position: relative;
					top: 10rpx;
					font-size: 24rpx;
					text-align: center;
					color: $uni-color-primary;
				}
			}
		}

	}
</style>
